<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <el-row>
    <el-col :span="12"
      ><el-card shadow="always" class="card" id="main"></el-card
    ></el-col>
    <el-col :span="12"
      ><el-card shadow="always" class="card" id="chartPie"></el-card
    ></el-col>
  </el-row>
  <el-card shadow="always" class="thecard" id="chart"></el-card>
</template>
<script>
import * as echarts from "echarts";
export default {
  name: "Vstatistics",
  data() {
    return {
      charts: "",
      numm: [],
    };
  },
  methods: {
    // 获取博客类型对应的数量
    // getTypeNum() {
    //   let token = localStorage.getItem("token");
    //   this.$http.get("/getTypeNum", token).then((res) => {
    //     if (res.statusCode == "200") {
    //       // 类型名称 res.data.x;
    //       // 类型数量 res.data.y;
    //       var getData = [];
    //       //先进行赋值
    //       for (let i = 0; i < res.data.x.length; i++) {
    //         var obj = new Object();
    //         obj.name = res.data.x[i];
    //         obj.value = res.data.y[i];
    //         getData[i] = obj;
    //       }
    //       this.numm = getData;
    //     }
    //   });
    // },

    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        //设置标题,副标题,以及标题位置居中
        title: {
          text: "疫苗种类库存占比",
          subtext: "(饼状图)",
          top: 20,
          x: "center",
        },
        //具体点击某一项触发的样式内容
        tooltip: {
          trigger: "item",
          //formatter: "{a} <br/>{b} : {c} ({d}%)"
          formatter: "{b} : {c} ({d}%)",
        },
        //左上侧分类条形符
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   data: this.opinion,
        // },
        //饼状图类型以及数据源
        series: [
          {
            name: "统计数量",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            data: [
              { value: 1048, name: "减毒疫苗" },
              { value: 735, name: "灭活疫苗" },
              { value: 580, name: "核酸疫苗" },
              { value: 484, name: "亚单位疫苗" },
              { value: 484, name: "病毒样颗粒疫苗" },
              { value: 300, name: "病毒载体疫苗" },
            ],
            //data: this.numm,
            //设置饼状图扇形区域的样式
          },
        ],
      });
    },
    drawPieChart() {
      this.chartPie = echarts.init(document.getElementById("chartPie"));
      this.chartPie.setOption({
        title: {
          text: "数据库柱状图",
          x: "center",
        },
        //具体点击某一项触发的样式内容
        tooltip: {
          trigger: "item",
        },
        xAxis: {
          type: "category",
          data: ["用户数量", "接种数量", "预约数量", "公告数量", "论坛数量", "评论数量"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: "bar",
          },
        ],
      });
    },
    drawChart() {
      this.chartPie = echarts.init(document.getElementById("chart"));
      this.chartPie.setOption({
        tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['接种', '预约', '变化量']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '数量',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value}'
      }
    },
    {
      type: 'value',
      name: '比例',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} '
      }
    }
  ],
  series: [
    {
      name: '接种',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: '预约',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '变化量',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value ;
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
      });
    },
  },

  //调用
  mounted() {
    //this.getTypeNum(),
    //如果数据同时调用时，可能会因为数据加载不完全就渲染图表，会引发报错，因此可以使用setTimeout进行延时处理
    setTimeout(() => {
      this.$nextTick(function () {
        this.drawPie("main");
        this.drawPieChart();
        this.drawChart();
      });
    }, 500);
  },
};
</script>
<style scoped>
.card {
  height: 400px;
  width: 90%;
  margin: auto;
  margin-top: 10px;
}
.thecard{
  height: 500px;
  width: 95%;
  margin: auto;
  margin-top: 10px;
}
</style>
